本篇重點

MCP 和 WebMCP 都在談「Tools」，但它們解決的不是完全相同的問題。MCP 比較像 AI 應用與外部服務之間的通用連接協定；WebMCP 則讓目前正在瀏覽的網站本身把能力提供給瀏覽器裡的 Agent。

最重要的一句話：MCP 讓 Agent 連服務，WebMCP 讓網頁成為 Agent 的 Tool Provider。

為什麼名稱這麼像？

Model Context Protocol 普及之後，我第一次看到 WebMCP 時也會直覺想：

這是不是把 MCP Server 搬進瀏覽器？

但如果真的這樣理解，後面的架構很容易亂掉。

先看一般 MCP 的概念：

AI App / Host
     ↓
MCP Client
     ↓
MCP Server
     ↓
GitHub / Database / Notion / Internal API

MCP Server 可以提供 Tools、Resources 等能力，AI 應用透過 MCP Client 連上去。

WebMCP 的路徑則比較像：

User
  ↓
Browser Agent
  ↓
Browser
  ↓
Current Web Page
  ↓
document.modelContext
  ↓
Website Tool

Tool 的生命週期跟著頁面、登入狀態與目前網站情境走。

最大差異：誰最了解網站現在能做什麼？

假設我在電商網站登入會員，畫面上現在有：

• 查看會員優惠
• 查詢目前購物車
• 加入收藏
• 取消某筆尚未出貨訂單

如果全部透過獨立 MCP Server 實作，Server 還需要知道目前瀏覽者身分、Session、頁面狀態，以及網站願意讓 Agent 做哪些事情。

WebMCP 則讓網站自己提供能力。這很合理，因為網站最清楚：

• 使用者現在有沒有登入。
• 現在在哪一個頁面。
• 哪些動作目前可以執行。
• 原本的前端 Business Logic 在哪裡。

兩者不是競爭關係

我會用這個表格區分：

當然，真正的系統也可能兩個都用：

Browser Agent
   │
   ├─ WebMCP → 目前網站的購物車
   │
   └─ MCP → 行事曆 / 公司 CRM / 其他外部服務

WebMCP 其實很 Web

WebMCP 的官方 Draft 直接擴充 Document，提供 document.modelContext。這代表它不是一個單純 JavaScript Library，而是往 Web Platform API 的方向設計。

例如網站註冊：

await document.modelContext.registerTool({
  name: 'get_cart',
  description: 'Get the current shopping cart.',
  inputSchema: {
    type: 'object',
    properties: {}
  },
  execute: async () => {
    return JSON.stringify(await getCart());
  }
});

Tool 不是部署到另一台 MCP Server，而是由目前 Document 註冊。

頁面狀態是 WebMCP 很有趣的地方

比如使用者尚未登入：

Tools:
- search_products
- login

登入後：

Tools:
- search_products
- get_cart
- add_to_favorites
- get_orders
- logout

網站可以依狀態註冊／移除工具。官方 API 也有 toolchange event，讓可用 Tools 改變時能被觀察。

那我是不是所有 API 都要變 WebMCP？

不用。

一個很容易犯的錯誤，是看到 Tool Calling 就想把所有 REST API 一比一暴露出去。Agent 真正在意的是「完成使用者目標」，不一定需要知道你的資料庫 CRUD 細節。

例如：

❌ get_product_table_row
❌ update_cart_session_value
❌ trigger_button_click

✅ search_products
✅ add_to_cart
✅ prepare_checkout

這也是為什麼 WebMCP 不只是技術串接，Tool Design 同樣重要。

可帶走的重點

1. MCP 與 WebMCP 都有 Tool 概念，但運作位置不同。
2. MCP 常用來把 AI Host 接到外部服務；WebMCP 讓 Web Page 提供能力給 Agent。
3. WebMCP 特別適合與目前頁面、Session、登入狀態高度相關的操作。
4. MCP 和 WebMCP 可以同時存在於一個 Agent Workflow。
5. 不要把後端 API 一比一轉成 Tools；應從使用者 Intent 設計能力。

參考資料

• Chrome：WebMCP and AI agents
• WebMCP Draft